* {
    margin: 0px;
    padding: 0px;
}

body {
    overflow-x: auto;
    white-space: nowrap;
    min-width: 1400px;
}

.headbar {
    width: 100%;
    height: 40px;
    background-color: #323232;
}

.headbar .topbar {
    width: 90vw;
    height: 100%;
    padding-left: 8%;
    display: inline-block;
}

.headbar .topbar a {
    height: 100%;
    text-decoration: none;
    font-size: 12px;
    cursor: pointer;
    color: #b0b0b0;
    line-height: 40px;
    display: inline-block;
}

.headbar .topbar a:hover {
    color: #fffdfd;
}

.headbar .topbar .shopping_cart {
    display: inline-block;
    width: 8%;
    font-size: 13px;
    font-weight: 600;
    color: #ffffff;
}

.headbar .topbar .shopping_cart .first {
    width: 20px;
    height: 20px;
    margin-left: 20%;
    vertical-align: middle;
    margin-right: 5%;
}

.headbar .topbar .shopping_cart .two {
    width: 20px;
    height: 20px;
    margin-left: 20%;
    vertical-align: middle;
    margin-right: 5%;
    display: none;
}

.headbar .topbar .shopping_cart:hover .first {
    background-color: #a0a0a0;
    display: none;
}

.headbar .topbar .shopping_cart:hover .two {
    background-color: #a0a0a0;
    display: inline-block;
}

.headbar .topbar span {
    color: #676767;
}

.site_header {
    width: 90vw;
    height: 100px;
    line-height: 100px;
    padding-left: 8%;
    position: relative;
}

.site_header img {
    width: 50px;
    height: 50px;
    background-color: #ff5e00;
    border-radius: 18px;
    vertical-align: middle;
    margin-right: 15%;
    cursor: pointer;
    padding: 10px;
}

.site_header a {
    text-decoration: none;
    color: #323232;
    margin-left: 1%;
    display: inline-block;
    height: 100%;
}

.site_header a .goodsbar {
    display: none;
    position: absolute;
    width: 90%;
    height: 250%;
    left: 5%;
}

.site_header a .goodsbar span {
    width: 12%;
}

.site_header a .goodsbar span img {
    width: 100%;
    height: 50%;
    background-color: transparent;
    margin-top: 2%;
}

.site_header a .goodsbar span .vertical_line {
    height: 50%;
    width: 5px;
}

.site_header a .goodsbar span .text {
    text-align: center;
    font-size: 14px;
    color: #323232;
    margin-bottom: -15%;
}

.site_header a .goodsbar span .price {
    text-align: center;
    font-size: 12px;
    color: #ff5e00;
    margin-top: -40%;
}

.site_header a span {
    height: 100%;
    width: 10%;
    background-color: #fff;
}

.site_header a:hover {
    color: #ff5e00;
}

.site_header a:hover .goodsbar {
    display: flex;
    position: absolute;
    background-color: #fff;
    border-top: 1px solid #dcdcdc;
    justify-content: space-around;
    z-index: 100;
}

.site_header .research {
    display: inline-block;
    width: 8%;
    height: 100%;
}

.site_header .research img {
    background-color: #fff;
    border-radius: 0px;
    border: 1px solid black;
    margin-left: -24px;
    margin-top: -2px;
    width: 20px;
    height: 20px;
}


}
.site_header .research img:hover {
    background-color: #ff5e00;
}
.site_header .research #hover_show {
    display: none;
}
.site_header .research .img:hover #hover_hide {
    display: none;
}
.site_header .research .img:hover #hover_show {
    display: inline-block;
}
.swiper_site {
    width: 85%;
    height: 500px;
    margin: 0 auto;
    position: relative;
}
.swiper_site img {
    width: 100%;
    height: 100%;
}
.swiper_site .leftbar {
    position: absolute;
    left: 0px;
    height: 100%;
    width: 22%;
    background-color: rgba(132, 132, 132, 0.5);
    z-index: 50;
    color: #ffffff;
}
.swiper_site .leftbar .text {
    box-sizing: border-box;
    height: 9%;
    width: 100%;
    padding-left: 10%;
    padding-top: 4%;
}
.swiper_site .leftbar .text .goods_list {
    margin-top: -12%;
    padding-top: 2%;
    position: absolute;
    left: 100%;
    top: 6.9%;
    height: 100%;
    width: calc(78/22*100%);
    display: flex;
    display: none;
    background-color: red;
}
.swiper_site .leftbar .text .goods_list .good:hover {
    color: #ff5e00;
    cursor: pointer;
}
.swiper_site .leftbar .text .goods_list .good {
    display: none;
    width: 25%;
    font-size: 13px;
    color: #323232;
}
.swiper_site .leftbar .text .goods_list .good img {
    width: 40px;
    height: 40px;
}
.swiper_site .leftbar .text:hover {
    background-color: #ff5e00;
}
.swiper_site .leftbar .text:hover .goods_list {
    box-shadow: #e4e2e2 0px 0px 2px 2px inset;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    display: flex;
    flex-wrap: wrap;
    /* 多行的时候辅轴方向 y */
    
    align-content: flex-start;
    background-color: #ffffff;
}
.swiper_site .leftbar .text:hover .goods_list .good {
    display: inline-block;
    height: 18%;
}
.activity {
    width: 90%;
    height: 40%;
    margin: 0 auto;
    position: relative;
    margin-top: 2%;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.activity span {
    width: 20%;
    height: 80%;
    background-color: #7e1f1f;
}
.activity img {
    width: 20%;
    height: 80%;
}